<template>
    <div class='login-wapper' @click="show = true">
        登录
    </div>
    <div v-if="show" class="login-dialog" @click.self="show = false">
        <div class="login-form">
            <div class="title">登录</div>
            <div class="form">
                <div class="item">
                    <div class="label">用户名</div>
                    <div class="input">
                        <input type="text">
                    </div>
                </div>
                <div class="item">
                    <div class="label">密码</div>
                    <div class="input">
                        <input type="password">
                    </div>
                </div>
            </div>
            <div class="submit">
                <button @click="login">登录</button>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
const show = ref(false)
const login = ()=>{
    window.location.href = 'http://www.baidu.com'
}
</script>
<style lang='scss' scoped>
.login-wapper {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #fff;
    cursor: pointer
}
.login-dialog{
    position: fixed;
    left: 0;
    top: 0;
    width:100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
    .login-form{
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%,-50%);
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        background:url(@/assets/right/bottom-bg.png) no-repeat;
        background-size:100% 100%;
        color: #fff;
        .title{
            text-align: center;
            font-size: 20px;
            letter-spacing: 4px;
            margin: 20px 0;
        }
        .form{
            .item{
                margin-bottom: 10px;
                display: flex;
                .label{
                    width: 50px;
                }
                .input{
                    input{
                        padding: 2px 4px;

                    }
                }
            }
        }
        .submit{
            text-align: center;
            button{
                padding: 4px 16px;
                color: #fff;
                outline: none;
                border: none;
                border-radius: 4px;
                font-size: 12px;
                background-color: #3e34c7;
                cursor: pointer;
                &:hover{
                    background-color: #3e34c7aa;
                }
            }
        }
    }
}
</style>